{{setTitle     "按钮"}}
{{setSubTitle  "简单的按钮样式"}}
{{setActiveNav "buttons"}}

{{addRemoteCSS "http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css"}}
{{addRemoteCSS "http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.css"}}

{{> header}}

<div class="content">

    <h2 class="content-subhead">默认按钮</h2>
    <p>
      给{{code "<a>"}}或者{{code "<button>"}}元素添加一个类名{{code "pure-button"}}就可以了。
    </p>

  {{#prefixIds "default"}}
    {{> buttons/default}}
  {{/prefixIds}}


  {{#code}}
    {{> buttons/default}}
  {{/code}}

    <h2 class="content-subhead">禁用按钮</h2>
    <p>
        在默认按钮的基础上，再添加一个类名{{code "pure-button-disabled"}}
    </p>

  {{#prefixIds "disabled"}}
    {{> buttons/disabled}}
  {{/prefixIds}}

  {{#code}}
    {{> buttons/disabled}}
  {{/code}}

    <h2 class="content-subhead">激活按钮</h2>
    <p>
      在默认按钮的基础上添加一个类名{{code "pure-button-active"}}就可以实现激活状态（“按下”按钮）的效果。
    </p>

  {{#prefixIds "active"}}
    {{> buttons/active}}
  {{/prefixIds}}

  {{#code}}
    {{> buttons/active}}
  {{/code}}

    <h2 class="content-subhead">首要按钮</h2>
    <p>
      在默认按钮的基础上，添加一个类名{{code "pure-button-primary"}}就可以创建一个首要按钮，表示一个首要的动作。
    </p>

  {{#prefixIds "primary"}}
    {{> buttons/primary}}
  {{/prefixIds}}

  {{#code}}
    {{> buttons/primary}}
  {{/code}}



    <h2 class="content-subhead">定制按钮</h2>
    <p>
        由于Pure最小化的样式修饰，这使得你在你的应用里，可以很容易地定制按钮的样式。
    </p>

    <p>
        你可以用一个类名去定制你的样式，比如类名为{{code "pure-button-foo"}}。然后你就可以把它添加到已经有类名为{{code "pure-button"}}的元素（默认按钮）就可以了。这里有些例子
    </p>

    <h3 class="content-subhead">设置圆角和颜色</h3>

  {{#prefixIds "primary"}}
    {{> buttons/colors}}
  {{/prefixIds}}

  {{#code}}
    {{> buttons/colors}}
  {{/code}}


    <h3 class="content-subhead">设置按钮大小</h3>

  {{#prefixIds "primary"}}
    {{> buttons/sizes}}
  {{/prefixIds}}

  {{#code}}
    {{> buttons/sizes}}
  {{/code}}


    <h3 class="content-subhead">给按钮加上图标</h3>
    <p>
        Pure没有收集图标字体，但它可以很好地把已有的图标应用起来。让按钮包含图标非常简单。看下面使用<a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>的例子：把<a href="http://fortawesome.github.io/Font-Awesome/get-started/">Font Awesome的Css文件</a>引入到你的页面，然后在把{{code "<i>"}}元素放到一个按钮{{code "pure-button"}}里面。
    </p>

  {{#prefixIds "primary"}}
    {{> buttons/icons}}
  {{/prefixIds}}

  {{#code}}
    {{> buttons/icons}}
  {{/code}}

</div>

<script src="http://yui.yahooapis.com/{{yui_version}}/build/yui/yui{{min}}.js"></script>
{{> prevent-scroll}}
